<template>
	<view class="main" style="padding-bottom:30rpx;">
		<view class="mapInfo">
			<view class="mapInput">
				<view>中心地址</view>
				<input v-model="form.address" @click="show=true"/>
			</view>
			<view class="mapInput">
				<view>围栏半径（米）</view>
				<input v-model="form.radius">
			</view>
			<view class="mapInput">
				<view>围栏开关</view>
				 <u-switch v-model="form.fanceOpen" size="18" ></u-switch>
			</view>
			
			<view class="viewBtn"><view class="btn btn2" style="height:60rpx"  @tap="submit">确认</view></view>
			
			
			<view id="mapPosition" style="height:800rpx;margin-top:20rpx;">
				
			</view>
		</view>
		
			<u-popup :show="show" @close="show=false" mode="right"  :customStyle="{width:'750rpx'}">
				<view class="mapsearch">
					<input type="text" id="suggestId" ref="suggestInput"  @input='input' size="20" placeholder="输入地址" value=""  />
					<view class="subgList">
						
							<view class="item" @click="itemClick(item)" v-for="item in listadrss"><text>{{item.business}}</text>{{item.province}}{{item.street}}</view>
					
					</view>
					
				</div>
				 	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
					
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				imei:"",
				id:"",
				form:{
				  "address": "",
				  "deviceImei": "",
				  "fanceOpen": false,
				  "latitude": "",
				  "longitude": "",
				  "radius":undefined
				},
				bmap:null,
				ac:null,
				listadrss:[],
			}
		},
		onLoad(e){
			this.imei=e.imei;
			this.form.deviceImei=this.imei;
			this.id=e.id;
			this.detail();
		},
		methods: {
			G(id) {
				return document.getElementById(id);
			},
			detail(){
				this.$http.deviceFenceDetail({imei:this.imei}).then(res=>{
					this.getPosition(res);
					this.getsearch();
				})
			},
			submit(){
				if(!this.form.address){
					this.$tools.msg("请选择地址")
					return;
				}
				if(!this.form.radius){
					this.$tools.msg("请填写围栏半径")
					return;
				}
				
				this.$http.deviceFence(this.form).then(res=>{
					console.log(res)
					this.$tools.msg("设置成功！")
					setTimeout(res=>{
						uni.navigateTo({
							url:`/pages/deviceDetail/deviceDetail?id=${this.id}`
						})
					},2000)
					
				})
				
				
			},
			input(e){
				this.$u.throttle(()=>{
					var ac = new BMapGL.Autocomplete({
						//建立一个自动完成的对象
						input: this.$refs.suggestInput.$el.querySelector('input'),
						location: this.bmap,
						onSearchComplete: (e) => {
							this.listadrss = e._pois;
						},
					});
					
				}, 500)
			
						
			},
			 // 获取当前地址的经纬度坐标
			    async getLocation(address) {
			      try {
			        const point = await this.getPointByAddress(address);
			        this.point = point;
					this.form.longitude = point.lng;
					this.form.latitude = point.lat;
					this.form.address = address
					this.show=false;
					this.listadrss = [];
					this.bmap.clearOverlays();
					let point1 = new BMapGL.Point(point.lng,point.lat);
					this.bmap.centerAndZoom(point1, 15); //设置缩放级别		
					this.bmap.enableScrollWheelZoom();
					
					var marker =new BMapGL.Marker(point1)
					this.bmap.addOverlay(marker)
					
					document.getElementById("suggestId").value="";
			      } catch (error) {
			        console.error(error);
			      }
			    },
			    // 根据地址名称获取经纬度坐标
			    getPointByAddress(address) {
			      // 创建地理编码实例
			      const myGeo = new BMapGL.Geocoder();
			      return new Promise((resolve, reject) => {
			        // 对地址进行地理编码
			        myGeo.getPoint(address, (point) => {
			          if (point) {
			            // 地理编码成功，返回经纬度坐标对象
			            resolve(point);
			          } else {
			            // 地理编码失败
			            reject('地理编码失败');
			          }
			        }, '全国');
			      });
			    },
			
			async itemClick(_value){
				let myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				this.getLocation(myValue);
			},
			getsearch(){
				
					
			},
			// setPlace(){
			// 	map.clearOverlays();    //清除地图上所有覆盖物
			// 	function myFun(){
			// 		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			// 		map.centerAndZoom(pp, 18);
			// 		map.addOverlay(new BMapGL.Marker(pp));    //添加标注
			// 	}
			// 	var local = new BMapGL.LocalSearch(map, { //智能搜索
			// 	  onSearchComplete: myFun
			// 	});
			// 	local.search(myValue);
			// },
			getPosition(res){
				
				this.bmap = new BMapGL.Map("mapPosition");
				this.bmap.enableScrollWheelZoom();
				
				if(res.code==0){
					this.form = res.data;
					this.bmap.clearOverlays();
					
					
					let point1 = new BMapGL.Point(this.form.longitude,this.form.latitude);
					this.bmap.centerAndZoom(point1, 15); //设置缩放级别	
					var marker =new BMapGL.Marker(point1)
					this.bmap.addOverlay(marker)
					
				}else{
					 this.bmap.centerAndZoom("成都",12);
				}
			
			},
		}
	}
</script>

<style scoped>
.main{
		background: url(@/static/images/indexbg.png) no-repeat #e7fcf5;
		background-size:100% auto;
		padding:30rpx;
	
	}
.mapInfo{
	background:#fff;
	border-radius: 20rpx;
}
.mapInput{
	padding:0 20rpx;
	display: flex;
	height:80rpx;
	align-items: center;
	border-bottom: 1rpx solid #dcdcdc;
}
.mapInput view{
	margin-right:10rpx;
}

.mapsearch{
	position: relative;
	margin: 30% 30rpx 0 30rpx;
	border:1rpx solid #dcdcdc;
	
}
.mapsearch input{
	height:80rpx;
	width: 100%;
	padding: 0 16rpx;
	box-sizing: border-box;
}
.subgList{
	
}
.subgList .item{
	color:#838383;
	border-bottom:1rpx solid #dcdcdc;
	height:60rpx;
	display: flex;
	align-items: center;
	padding-left:10rpx;
}
.subgList .item:last-child{
	border-bottom: 0;
}
.subgList .item text{font-weight: bold;}
.viewBtn{display: flex;align-items: center;justify-content: center;padding-top:30rpx;}

</style>
